<template>
  <div class="currentPage">
    <market-header />

    <div v-if="detailData" class="main">
      <div class="w1300 flex" style="background:#fff;">
        <div class="mainLf">
          <el-image class="zoomPic" fit="cover" :src="showImg" alt="" />
          <thumbnail
            :img-size="80"
            :img-margin="20"
            :ele="detailData"
            @setShowImg="setShowImg"
          />
        </div>
        <div class="mainRt">
          <div class="title">
            {{ detailData.product.name }}
          </div>

          <!-- 变种图片 -->
          <template v-if="detailData.inventorys.length > 0">
            <p class="itemTitle block">Variants</p>
            <div class="variantImgs">
              <div
                v-for="(item, index) in detailData.inventorys"
                :key="index"
                class="variantImg"
              >
                <el-image
                  fit="cover"
                  :src="imgPrefix + item.thumbnailUri"
                  alt=""
                  @click="highVariant(item)"
                />
              </div>
            </div>
            <div
              v-for="(item, index) in detailData.variants"
              :key="index"
              class="product_type"
            >
              <p class="itemTitle block">{{ item.name }}</p>
              <div class="spec">
                <span
                  v-for="(it, i) in item.children"
                  :key="i"
                  :class="[selectedValues.includes(it) ? 'active' : '']"
                >{{ it }}</span>
              </div>
            </div>
          </template>
          <div class="price">
            <span class="itemTitle">Price:</span>
            <span>${{ price }}</span>
          </div>
          <el-table :data="tableData" style="width:400px">
            <el-table-column
              prop="logisticsName"
              label="Logistics"
              align="center"
            />
            <el-table-column align="center" prop="dayRange" label="Time" />
            <el-table-column align="center" label="Price">
              <template slot-scope="scope">
                {{ scope.row.price / 100 }}
              </template>
            </el-table-column>
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-radio
                  v-model="templateRadio"
                  :label="scope.$index"
                  @change.native="getTemplateRow(scope.$index, scope.row)"
                >&nbsp;</el-radio>
              </template>
            </el-table-column>
          </el-table>
          <div class="btns">
            <el-dropdown
              @command="(command) => gather(detailData.product.id, command)"
            >
              <el-button type="danger" size="medium" plain>GATHER</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1">SHOPIFY</el-dropdown-item>
                <el-dropdown-item :command="2">WOOCOMMERCE</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="danger" size="medium" @click="collectFavorite">
              <svg-icon icon-class="m-collect" />
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-else v-loading="loading" class="main" />
    <el-tabs v-if="detailData" v-model="activeName" class="w1300" type="card">
      <el-tab-pane label="DESCRIPTION" name="first">
        <div class="parameter" v-html="detailData.content.description" />
      </el-tab-pane>
    </el-tabs>
    <market-footer />
  </div>
</template>

<script>
import { marketDetail } from '@/api/market';
import MarketHeader from './components/header';
import MarketFooter from './components/footer';
import { collectFavorite, gather } from '@/api/product';
import thumbnail from './components/thumbnail';
export default {
  components: {
    MarketHeader,
    MarketFooter,
    thumbnail
  },

  data() {
    return {
      active: 0,
      max: 5,
      loading: true,
      detailData: null,
      showImg: '',
      num: 0,
      selectedValues: [],
      price: null,
      activeName: 'first',
      tableData: [],
      templateRadio: false,
      templateSelection: {},
      cloneProductFreights: []
    };
  },
  watch: {
    detailData: function() {
      this.$nextTick(function() {
        if (
          document.documentElement.clientHeight >
          document.getElementsByClassName('currentPage')[0].clientHeight
        ) {
          document.getElementsByClassName('currentPage')[0].style.minHeight =
            document.documentElement.clientHeight + 'px';
        } else {
          document.getElementsByClassName('currentPage')[0].style.minHeight =
            950 + 'px';
        }
        if (
          document
            .getElementsByClassName('parameter')[0]
            .getElementsByTagName('img')[0]
        ) {
          const attrArr = document
            .getElementsByClassName('parameter')[0]
            .getElementsByTagName('img');
          for (var i = 0; i < attrArr.length; i++) {
            document
              .getElementsByClassName('parameter')[0]
              .getElementsByTagName('img')[0].style.width = '100%';
          }
        }
      });
    }
  },
  created() {
    this.init(this.$route.query.id);
  },
  methods: {
    init(id) {
      marketDetail(id).then((res) => {
        if (res.code === 200) {
          if (res.data.inventorys.length > 0) {
            const arr = res.data.inventorys.map((item) => {
              return item.titleValues.split('_');
            });
            res.data.variants.forEach((item, index) => {
              item.children = [];
              arr.forEach((it) => {
                if (!item.children.includes(it[index])) {
                  item.children.push(it[index]);
                }
              });
            });
          }
          res.data.imgActiveIndex = 0;
          this.detailData = res.data;
          this.price = res.data.product.salePrice / 100;
          this.showImg = this.imgPrefix + this.detailData.images[0].uri;
          this.tableData = res.data.productFreights;
          this.cloneProductFreights = res.data.productFreights;
        }
      });
    },
    gather(id, command) {
      gather({
        id: id,
        storeIds: [command]
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success('gather success');
        }
      });
    },
    highVariant(item) {
      this.tableData = item.productFreights;
      this.price = item.salePrice / 100;
      this.showImg = this.imgPrefix + item.thumbnailUri;
      this.selectedValues = item.titleValues.split('_');
    },
    getTemplateRow(index, row) {
      // 获取选中报价单
      this.templateSelection = row;
      this.price = row.price / 100;
    },
    collectFavorite() {
      collectFavorite([this.detailData.product.id]).then((res) => {
        if (res.code === 200) {
          this.$message.success('collect success');
        }
      });
    },
    prevItem(index, ele) {
      if (ele.imgActiveIndex > 0) {
        this.$set(this.detailData, 'imgActiveIndex', ele.imgActiveIndex - 1);
        this.$nextTick(() => {
          this.showImg =
            this.detailData.images[ele.imgActiveIndex].uri.indexOf('http') === 0
              ? this.detailData.images[ele.imgActiveIndex].uri
              : this.imgPrefix + this.detailData.images[ele.imgActiveIndex].uri;
        });
        this.price = this.detailData.product.salePrice / 100;
      }
    },
    setShowImg(index) {
      this.$set(this.detailData, 'imgActiveIndex', index);
      this.showImg = '';
      this.showImg =
        this.detailData.images[index].uri.indexOf('http') === 0
          ? this.detailData.images[index].uri
          : this.imgPrefix + this.detailData.images[index].uri;
      this.price = this.detailData.product.salePrice / 100;
      this.tableData = this.cloneProductFreights;
    }
  }
};
</script>
<style lang="scss" scoped>
.currentPage {
  position: relative;
}
.w1300 {
  width: 1300px;
  margin: 0 auto;
}
.flex {
  display: flex;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main {
  min-height: 440px;
  font-family: 'Segoe UI';
  .mainLf {
    width: 550px;
    // padding: 15px;
    margin-right: 80px;
    .zoomPic {
      border: 1px dashed #aaa;
      width: 550px;
      height: 460px;
    }
  }
  .mainRt {
    flex: 1;
    padding: 15px;
    overflow: hidden;
    .itemTitle {
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      color: rgba(102, 102, 102, 1);
      &.block {
        padding: 10px 0;
      }
    }
    .title {
      position: relative;
      font-size: 30px;
      color: #333;
      font-weight: bold;
      padding-bottom: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .title::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 48px;
      height: 6px;
      background: rgba(228, 45, 3, 1);
    }
    .price {
      font-size: 24px;
      color: #f56c6c;
      font-style: 600;
      padding: 10px 0;
      margin: 10px 0;
      span {
        &:last-child {
          font-weight: bold;
          margin: 0 15px;
        }
      }
    }
    .product_type {
      .product_variants {
        img {
          width: 50px;
          height: 50px;
          border: 1px solid #aaa;
          margin-right: 10px;
          &.active {
            border-color: #f56c6c;
          }
        }
      }
      .spec {
        span {
          display: inline-block;
          padding: 0 8px;
          height: 26px;
          border: 1px solid #aaa;
          font-size: 18px;
          text-align: center;
          line-height: 26px;
          margin-right: 5px;
          // cursor: pointer;
          &.active {
            border-color: #f56c6c;
          }
        }
      }
    }
    .el-table {
      ::v-deep th {
        .cell {
          font-size: 18px;
          font-weight: normal;
        }
      }
      ::v-deep td {
        .cell {
          font-size: 16px;
        }
      }
    }
    .btns {
      margin-top: 10px;
      .el-button {
        background: rgba(228, 45, 3, 1);
        color: #fff;
        font-size: 24px;
        font-family: 'Segoe UI';
      }
      > .el-button {
        padding: 12px;
        height: 50px;
        margin-left: 10px;
      }
      .el-dropdown {
        .el-button {
          padding: 12px 150px;
        }
      }
    }
    .parameter {
      border: 1px solid #ddd;
      padding: 15px;
      margin-top: 20px;
      font-size: 13px;
      margin-bottom: 125px;
      .brand {
        padding-bottom: 15px;
      }
      .parameter_title {
        line-height: 28px;
        a {
          float: right;
        }
      }
      .details {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 34%;
            line-height: 30px;
          }
        }
      }
    }
  }
}
.variantImgs {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding: 0 4px;
  > .variantImg {
    .el-image {
      width: 72px;
      height: 72px;
      border: 1px dashed #ddd;
      margin-right: 15px;
      cursor: pointer;
      overflow: hidden;
    }
  }
}
.el-tabs {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #adadad;
  ::v-deep.el-tabs__header {
    border-color: #adadad;
    .el-tabs__nav {
      border-color: #adadad;
    }
  }
  ::v-deep.el-tabs__item {
    font-size: 16px;
    &.is-active {
      color: #000;
      background: #f6f6f6;
    }
  }
}
::v-deep .el-radio__label {
  display: none;
}
</style>
